<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside>
                    <Aside></Aside>
                </el-aside>
                <el-main>
                    <el-card class="box-card">
                        <router-view></router-view>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import Header from '../components/Header.vue'
import Aside from '../components/Aside.vue';
</script>
<style lang="scss" scoped>
.el-container {
    height: 100%;

    .el-header {
        background: -webkit-gradient(linear, left top, right top, from(#1493fa, to(#01c6fa)));
        text-align: center;
        line-height: 60px;
        color: #333;
        padding: 0;
    }

    .el-aside {
        width: 200px;
        height: 100%;
        color: #333;
        background: white;
    }

    .el-main {
        height: 100vh;
        background-color: #e9eef3;
        color: #333;        
    }
}
</style>